<template>
	<BpmComponent :processInstanceId="processInstanceId">
		<template #approval-info>
			<up-form labelPosition="left" labelWidth="120">
				<up-form-item v-for="field in formFields" :key="field.prop" :label="field.label" borderBottom>
					{{ field.format ? field.format(formData[field.prop]) : formData[field.prop] || '无' }}
				</up-form-item>
			</up-form>
		</template>
	</BpmComponent>
</template>

<script setup lang="ts">
	import { onLoad } from "@dcloudio/uni-app";
	import { ref, unref, reactive, nextTick, getCurrentInstance } from 'vue'
	import BpmComponent from '@/components/processInstance/detail/index.vue'
	import { MajorHazardReportVerificationApi, MajorHazardReportVerificationVO } from '@/api/safety/majorhazard/majorhazardreportverification'


	const processInstanceId = ref(null)// 流程实例的编号
	const detailId = ref(null)
	const formData = ref<MajorHazardReportVerificationVO>({} as any)
	const formFields = [
		{ prop: 'reporter', label: '举报人' },
		{ prop: 'reportDate', label: '举报时间' },
		{ prop: 'responsibleUnitAndArea', label: '隐患责任单位及部位' },
		{ prop: 'hazardDescription', label: '隐患简要描述' },
		{ prop: 'potentialHarm', label: '可能发生的危害' },
		{ prop: 'safetyMeasuresTaken', label: '采取的安全措施' },
		{ prop: 'isMajorHazard', label: '所举报线索是否为重大隐患 ' },
		{ prop: 'hasFeasibleSolution', label: '是否提出合理可行的整改方案' },
		{ prop: 'verificationPerson', label: '确认核实人员' }
	] as any
	onLoad(async (options) => {
		processInstanceId.value = options?.processInstanceId
		detailId.value = options?.id
		/** 获得详情 */
		getDetailById()
	})
	/** 获取页面详情 */
	const getDetailById = async () => {
		try {
			const data = await MajorHazardReportVerificationApi.getMajorHazardReportVerification(Number(detailId.value))
			formData.value = data
		} catch (error) {
			console.log('加载数据失败')
		}
	}
</script>

<style>
	/* 样式 */
	.uv-node {
		height: 34rpx;
		width: 34rpx;
		border-radius: 50%;
		background-color: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		flex-shrink: 0;
		z-index: -1;
	}

	.audit-node {
		margin: 5px 0;
	}
</style>